<script lang="ts" setup>
import { useRoute } from 'vue-router'

import {
  House,
  Notification,
  Aim,
  Connection,
  Document,
  Memo,
  Menu as IconMenu,
} from '@element-plus/icons-vue'

const route = useRoute()
const activeUrl = route.path

</script>

<template>
  <div class="logo"></div>
  <el-menu :default-active="activeUrl" router>
    <el-menu-item index="/department/home" route="/department/home">
      <el-icon>
        <House />
      </el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/department/depstu" route="/department/depstu">
      <el-icon>
        <Memo />
      </el-icon>
      <span>部门成员管理</span>
    </el-menu-item>
    <el-menu-item index="/department/activity" route="/department/activity">
      <el-icon>
        <Document />
      </el-icon>
      <span>活动管理</span>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>
.logo {
  height: 86px;
}

.el-menu {
  background-color: transparent;
}

.el-menu .is-active {
  color: #1b49e1;
  background-color: #0a1949;
}

.el-menu-item {
  color: #c4c9d2
}

.el-menu-item:hover {
  background-color: #0a1949
}
</style>